<template>
  <div class="min-h-screen gradient-bg flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-md w-full">
      <div class="login-card rounded-2xl p-8">
        <div class="text-center">
          <i class="fas fa-paw text-6xl text-indigo-600 mb-4"></i>
          <h2 class="text-3xl font-extrabold text-gray-900 mb-8">
            宠物商城管理系统
          </h2>
        </div>
        <form class="mt-8 space-y-6" @submit.prevent="handleLogin">
          <div class="space-y-4">
            <div class="input-group">
              <input
                v-model="username"
                type="text"
                required
                placeholder="用户名"
                class="text-center"
              />
            </div>
            <div class="input-group">
              <input
                v-model="password"
                type="password"
                required
                placeholder="密码"
                class="text-center"
              />
            </div>
            <div class="mb-4">
              <label class="block text-gray-700 text-sm font-bold mb-2">
                登录类型
              </label>
              <div class="flex items-center">
                <input
                  class="mr-2"
                  type="radio"
                  id="user"
                  value="user"
                  v-model="loginType"
                />
                <label class="mr-4" for="user">用户</label>
                <input
                  class="mr-2"
                  type="radio"
                  id="admin"
                  value="admin"
                  v-model="loginType"
                />
                <label for="admin">管理员</label>
              </div>
            </div>
          </div>

          <div>
            <button
              type="submit"
              class="btn-primary group relative w-full flex justify-center py-3 px-4 border border-transparent text-lg font-medium rounded-lg text-white focus:outline-none"
              :disabled="loading"
            >
              <i class="fas fa-sign-in-alt mr-2"></i>
              {{ loading ? '登录中...' : '登录系统' }}
            </button>
          </div>

          <div class="text-center">
            <router-link
              to="/register"
              class="text-indigo-600 hover:text-indigo-500 font-medium"
            >
              还没有账号？立即注册
            </router-link>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../stores/auth'

const router = useRouter()
const authStore = useAuthStore()

const username = ref('')
const password = ref('')
const loginType = ref('user')
const loading = ref(false)

const handleLogin = async () => {
  try {
    loading.value = true
    await authStore.login({ username: username.value, password: password.value, role: loginType.value })
    router.push('/dashboard')
  } catch (error) {
    alert(error.response?.data?.error || '登录失败，请重试')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.gradient-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

.login-card {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1rem;
  padding: 8rem;
}

.input-group {
  position: relative;
  margin-bottom: 1.5rem;
}

.input-group input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  transition: all 0.3s;
  background-color: #f8fafc;
  font-size: 1.25rem;
  text-align: center;
}

.input-group input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
  outline: none;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transition: all 0.3s;
  border: none;
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.btn-primary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
</style> 